<template>
    <div class="rate">
        <div class="item" v-for="i in max" :key="i" :style="{width: size+unit, height: size+unit}">
            <i class="behind icon-take icon-xing" :style="{fontSize: size+unit}"></i>
            <i class="front icon-take icon-xing" v-if="i < frontCount" :style="{fontSize: size+unit}"></i>
            <i class="front icon-take icon-xing" v-if="i === frontCount" :style="{fontSize: size+unit, width: lastWidth}"></i>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Rate',
  props: {
    max: {type: Number, default: 5},
    size: {type: Number, default: 12},
    unit: {type: String, default: 'px'},
    score: {type: Number, default: 4.6}
  },
  computed: {
    frontCount () {
      return Math.ceil(this.score)
    },
    lastWidth () {
      let num = this.score.toFixed(1)
      let i = num.toString().substring(num.indexOf('.') + 1)
      if (i === '0') {
        return this.size + this.unit
      } else {
        return i / 10 * this.size + this.unit
      }
    }
  }
}
</script>

<style scoped>
.rate {
    display: inline-block;
}

.item {
    position: relative;
    float: left;
    font-size: 0;
}

i {
    position: absolute;
}

.front {
    overflow: hidden;
    color: #ffbd00;
}

.behind {
    color: #ccc;
}
</style>
